<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-07-26 12:16:21
 * @LastEditTime: 2023-08-10 18:38:19
-->
<script lang="ts" setup name="NewsConfig">
import type { FormInstance } from 'element-plus'
import useSettingsStore from '@g/store/modules/settings'
import { _ } from 'iking-utils'
import {
  placeholder,
  rules
} from './form-key'
import { useNews } from './useNews'
import NewsTemplateConfig from './NewsTemplateConfig.vue'
import configSuccess from './configSuccess.vue'
import { msgApi } from '@/MainApp/apis/msg'

const { getNoByTemplate, tempForm, newsStore, msgNoList, msgSuccess, msgError, tloading, getBusiness } = useNews()
provide('tempForm', tempForm)
getBusiness()

const { lenContent } = useLength()
const router = useRouter()
const activeStep = ref(0)
const loading = ref(false)
const tampChooseRef: Ref<FormInstance | null> = ref(null)

router.afterEach(() => {
  newsStore.setTemplateForm(null)
})

// 保存并继续
const handSaveAddContinue = () => {
  tampChooseRef.value?.validate(async valid => {
    if (!valid)
      return
    loading.value = true
    const { success, msg } = await msgApi.updateMsgTemplate(_.cloneDeep(tempForm.value))
    loading.value = false
    if (success) {
      msgSuccess(msg)

      activeStep.value = 1
    }
    else {
      msgError(msg)
    }
  })
}

const settingsStore = useSettingsStore()
const toggleAnimation = computed(() => settingsStore.settings.mainPage.enableTransition ? (settingsStore.settings.mainPage.transitionMode || 'slide-right') : 'slide-right')

// 取消
const handCancel = () => {
  router.back()
  tampChooseRef.value?.resetFields()
  newsStore.setTemplateForm(tempForm.value)
}
/**
 * @description: 继续新增
 * @return {*}
 */
const addContinue = () => {
  activeStep.value = 0
  nextTick(() => {
    tampChooseRef.value?.resetFields()
  })
}
</script>

<template>
  <IkPageMain fixed class="ik-news-template-config">
    <IkPageHeader title="新增" @back="handCancel" />
    <!-- <div class="content ik-center-hor max-w-[800px] w-full">
      <IKHorizontalStepBar v-model:active="activeStep" :list="dataList" />
    </div> -->
    <div class="step-content">
      <el-steps :active="activeStep" finish-status="success">
        <el-step title="选择消息" />
        <el-step title="配置推送渠道" />
        <el-step title="完成" />
      </el-steps>
      <transition :name="toggleAnimation" mode="out-in" appear>
        <div v-if="activeStep === 0" class="content ik-center-hor max-w-[800px] w-full">
          <el-form
            ref="tampChooseRef"
            v-loading="loading || tloading"
            label-width="100px"
            :model="tempForm"
            :rules="rules"
            label-position="top"
          >
            <el-form-item label="模块" prop="businessKey">
              <el-select
                v-model="tempForm.businessKey"
                :placeholder="placeholder.businessKey"
                @change="getNoByTemplate"
              >
                <el-option
                  v-for="item in newsStore.businessTypeList"
                  :key="item.businessKey"
                  :label="item.businessName"
                  :value="item.businessKey"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="编号" prop="messageTemplateKey">
              <el-select
                v-model="tempForm.messageTemplateKey"
                :placeholder="placeholder.messageTemplateKey"
              >
                <el-option
                  v-for="item in msgNoList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="messageTemplateTitle">
              <el-input
                v-model.trim="tempForm.messageTemplateTitle"
                clearable
                :max-length="lenContent"
                :placeholder="placeholder.messageTemplateTitle"
              />
            </el-form-item>
            <el-form-item label="">
              <el-button
                type="primary"
                :disabled="loading"
                @click="handSaveAddContinue"
              >
                保存并继续
              </el-button>
              <el-button @click="handCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else-if="activeStep === 1" class="w-full content ik-center-hor">
          <NewsTemplateConfig @next="activeStep += 1" />
        </div>
        <div v-else-if="activeStep === 2" class="w-full content ik-center-hor">
          <configSuccess @back="addContinue" />
        </div>
      </transition>
    </div>
  </IkPageMain>
</template>

<style lang="scss" scoped>
.ik-news-template-config{
  .step-content{
    height: 100%;
    max-width: 1200px;
    width: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;

    .content{
      padding: 20px 0;
      flex: 1;
      overflow: auto;
    }
  }
}
</style>
